<template>
  <div class="ep-setting-panel-container">
    <el-card shadow="never">
      <el-scrollbar :style="{ height: panelHeight }">
        <el-tabs v-model="rightTabs" stretch>
          <component
            :is="`${selected.type}-option`"
            :selected="selected"
            :widget-list="widgetList"
            :field-config="fieldConfig"
            :form-config="formConfig"
          />
          <el-tab-pane v-if="globalConfig.formConfigShow" name="form" label="全局">
            <el-form :model="formConfig" label-width="90px" label-position="left" size="small">
              <el-card style="font-size: 12px" shadow="never">
                <template #header>
                  <div style="display: flex; justify-content: space-between">
                    <span>PC端表单设置</span>
                  </div>
                </template>
                <el-radio-group v-model="formConfig.pc.size" class="ep-setting-panel-container__radio-group">
                  <el-form-item label="组件尺寸">
                    <el-radio-button label="large" value="large">大号</el-radio-button>
                    <el-radio-button label="default" value="default">默认</el-radio-button>
                    <el-radio-button label="small" value="small">小号</el-radio-button>
                  </el-form-item>
                </el-radio-group>
                <el-form-item label="标签宽度">
                  <el-input-number v-model="formConfig.pc.labelWidth" :min="60" :max="300" controls-position="right" />
                </el-form-item>
                <el-radio-group v-model="formConfig.pc.labelPosition" class="ep-setting-panel-container__radio-group">
                  <el-form-item label="标签位置">
                    <el-radio-button label="left" value="left">左侧</el-radio-button>
                    <el-radio-button label="right" value="right">右侧</el-radio-button>
                    <el-radio-button label="top" value="top">顶部</el-radio-button>
                  </el-form-item>
                </el-radio-group>
              </el-card>

              <el-divider />

              <el-card style="font-size: 12px" shadow="never">
                <template #header>
                  <div style="display: flex; justify-content: space-between">
                    <span>H5端表单设置</span>
                  </div>
                </template>
                <el-form-item label="标签宽度">
                  <el-input-number v-model="formConfig.h5.labelWidth" :min="60" :max="300" controls-position="right" />
                </el-form-item>
                <el-radio-group v-model="formConfig.h5.labelPosition" class="ep-setting-panel-container__radio-group">
                  <el-form-item label="标签位置">
                    <el-radio-button label="left" value="left">左侧</el-radio-button>
                    <el-radio-button label="right" value="right">右侧</el-radio-button>
                    <el-radio-button label="top" value="top">顶部</el-radio-button>
                  </el-form-item>
                </el-radio-group>
                <el-radio-group v-model="formConfig.h5.inputAlign" class="ep-setting-panel-container__radio-group">
                  <el-form-item label="输入框位置">
                    <el-radio-button label="left" value="left">左侧</el-radio-button>
                    <el-radio-button label="center" value="top">居中</el-radio-button>
                    <el-radio-button label="right" value="right">右侧</el-radio-button>
                  </el-form-item>
                </el-radio-group>
              </el-card>
            </el-form>
          </el-tab-pane>
          <el-tab-pane v-if="globalConfig.permissionShow" name="test" label="权限">
            <el-table :data="tableData" class="custom-border" size="small">
              <el-table-column prop="name" label="字段" />
              <el-table-column label="显示" width="60" :align="'center'">
                <template #default="scope">
                  <el-radio-group v-model="scope.row.permission" size="large" @change="changePermission">
                    <el-radio :value="0" />
                  </el-radio-group>
                </template>
              </el-table-column>
              <el-table-column label="只读" width="60" :align="'center'">
                <template #default="scope">
                  <el-radio-group v-model="scope.row.permission" size="large" @change="changePermission">
                    <el-radio :value="1" />
                  </el-radio-group>
                </template>
              </el-table-column>
              <el-table-column label="隐藏" width="60" :align="'center'">
                <template #default="scope">
                  <el-radio-group v-model="scope.row.permission" size="large" @change="changePermission">
                    <el-radio :value="2" />
                  </el-radio-group>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-scrollbar>
    </el-card>
  </div>
</template>

<script>
import { ref, computed, watch, inject } from 'vue'
import options from './options/index'

export default {
  components: { ...options },
  props: {
    /** 平台类型 PC/Pad/H5 */
    layoutType: {
      type: String,
      required: true
    },
    /** 容器滚动条高度 */
    height: {
      type: Number,
      default: 0
    },
    /** 表单配置 */
    formConfig: {
      type: Object,
      default: () => {}
    },
    /** 设计表单当前选中项 */
    selected: {
      type: Object,
      default: null
    },
    /** Json表单 */
    widgetList: {
      type: Array,
      default: null
    }
  },
  emits: ['onPermission'],
  setup(props, { emit }) {
    const globalConfig = inject('globalConfig', {})

    const panelHeight = computed(() => {
      return props.height + 'px'
    })

    const rightTabs = ref('form')

    const fieldConfig = computed(() => props.selected.options || {})
    const widgetList = computed(() => props.widgetList || [])

    const tableData = computed(() => {
      const list = props.widgetList.filter((m) => m.options && m.type !== 'card')
      const cards = props.widgetList.filter((m) => m.type === 'card')
      cards.forEach((e) => {
        const items = e.components.filter((m) => m.options)
        list.push(...items)
      })

      return list.map((item) => {
        return {
          id: item.id || '',
          name: item.options.label || '',
          type: item.type,
          permission: 0
        }
      })
    })

    const changePermission = () => {
      const value = tableData.value.reduce((acc, item) => {
        acc[item.id] = item.permission
        return acc
      }, {})
      emit('onPermission', value)
    }

    /** 自动切换属性面板 */
    watch(fieldConfig, (e) => {
      if (e.name) {
        rightTabs.value = 'field'
      } else {
        rightTabs.value = 'form'
      }
    })

    return {
      globalConfig,
      panelHeight,
      rightTabs,
      fieldConfig,
      widgetList,
      tableData,
      changePermission
    }
  }
}
</script>

<style lang="scss">
.ep-setting-panel-container {
  height: 100%;

  .drag-option {
    color: #777;
    font-size: 22px;
    cursor: move;
  }

  .label-switch {
    font-size: 12px;
    margin-left: 10px;
  }
  .color-g9 {
    color: #999;
  }

  .radioGroup {
    display: inline-flex;
    font-size: 0;
    flex-direction: column;
    align-items: normal;
  }

  .el-form-item {
    /** 开关图标大小 */
    .el-switch {
      height: 22px !important;
    }

    .el-form-item__label {
      // 标题超出一行时高度问题
      height: auto !important;
    }
  }
  .ep-setting-panel-container__radio-group {
    flex: 1;
    .el-radio-button {
      flex: 1;
    }
    .el-radio-button__inner {
      width: 100%;
    }
  }

  .custom-border {
    width: 100%;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
  }
}
</style>
